<template>
	<view class="body">
		<form @submit="formSubmit">
			<view class="face-wapper">
				<image src="../../static/icons/108x108.png" class="face"></image>
				<!-- https://img1.baidu.com/it/u=3303981320,1355171730&fm=26&fmt=auto -->
			</view>

			<view class="info-wapper">
				<label class="words-lbl">账号</label>
				<input name="username" type="text" value="" class="input" placeholder="请输入用户名"
					placeholder-class="graywords" />
			</view>

			<view class="info-wapper" style="margin-top: 40upx;">
				<label class="words-lbl">密码</label>
				<input name="password" type="text" value="" password="true" class="input" placeholder="请输入密码"
					placeholder-class="graywords" />
			</view>

			<button type="primary" form-type="submit" style="margin-top: 60upx;width: 90%;">注册/登录</button>
		</form>

		<!-- 第三方登录H5不支持，所以隐藏掉 -->
		<!-- #ifndef H5 -->
		<view class="third-wapper">
			<view class="third-line">
				<view class="single-line">
					<view class="line"></view>
				</view>

				<view class="third-words">第三方账号登录</view>

				<view class="single-line">
					<view class="line"></view>
				</view>
			</view>

			<view class="third-icos-wapper">
				<!-- 5+app 用qq/微信/微博 登录 小程序用微信小程序登录 h5不支持 -->
				<!-- #ifdef APP-PLUS -->
				<image src="../../static/icons/weixin.png" data-logintype="weixin" @click="appOAuthLogin"
					class="third-ico"></image>
				<image src="../../static/icons/QQ.png" data-logintype="qq" @click="appOAuthLogin" class="third-ico"
					style="margin-left: 80upx;"></image>
				<image src="../../static/icons/weibo.png" data-logintype="sinaweibo" @click="appOAuthLogin"
					class="third-ico" style="margin-left: 80upx;"></image>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button open-type='getUserInfo' @getuserinfo="wxLogin" class="third-btn-ico">
				</button>
				<!-- #endif -->
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		methods: {
			formSubmit(e) {
				// console.log(e);
				let form = e.detail.value
				form.cover = "../../static/icons/108x108.png"
				// console.log(form);
				// 发起请求
				// uni.request({
				// 	url: "",
				// 	data: form,
				// 	method:"POST",
				// 	success: (res) => {
				// if(res.code === 0) {
				// 	// 成功
				// } else if(res.code !== 0) {
				// 	uni.showToast({
				// 		title:"res.msg",
				// 		duration:1500,
				// 		image: "../../static/icons/error.png"
				// 	})
				// }
				// 	},
				// 	complete: () => {

				// 	},
				// })
				// 返回数据。存储数据
				uni.setStorageSync(
					"globalUser", form
				)
				// 切换页面跳转
				uni.switchTab({
					url: "../me/me"
				})
			},
			wxLogin(e) {
				// 实现微信小程序端的登录
				// console.log(e);
				// 通过微信开放能力，获得微信用户的基本信息
				const userInfo = e.detail.userInfo
				// 实现微信登录
				uni.login({
					provider:"weixin",
					success: (res) => {
						console.log(res);
						const code = res.code
						// 获得微信登录的code：授权码
						uni.request({
							url: "",
							method: "POST",
							data: {
								avatarUrl: userInfo.avatarUrl,
								nickName: userInfo.nickName,
							},
							success: () => {
								console.log(成功调用);
								// 后台返回的数据存储到storage中
								uni.navigateTo({
									url: "../me/me"
								})
							}
						})
					}
				})
			},
			appOAuthLogin(e) {
				console.log(e);
				// 获取用户的登录类型
				const logintype = e.currentTarget.dataset.logintype
				
				// 授权登录
				uni.login({
					provider: logintype,
					success: (loginRes) => {
						console.log(loginRes);
						// 授权登录以后，获取用户的信息
						uni.getUserInfo({
							provider: logintype,
							success: (res) => {
								// res存储的用户信息
								const userInfo = res.userInfo
								// 构建后台需要的数据，调用接口方法，根据loginType判断是哪一种登录方式，调用不同的方法
								// 方法调用后
								
								// 调用开发者后台，执行一键注册或者登录
								uni.request({
									url: ""
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "registorLogin.scss";
</style>
